
*{
	margin:0;
	padding:0;
}
#box{
    width:1200px;
	height:750px;
	margin:0 auto;
	border:1px solid black;
	position:relative;
	z-index: 0;
}
#box header{
	width:100%;
	height:8.333%;
	background-color:#6699cc;
	line-height:62.5px;
	position:relative;
	
}
#box article{
	width:100%;
	height:83.333%;
	background-color:honeydew;
	overflow-y:scroll;
	z-index: 0;
	position:relative;
}
#box footer{
	width:100%;
	height:8.333%;
	background-color:#6699cc;
	font-size:16px;
}

#box header li {
	list-style:none;
	float:left;
	margin-right:10px;
	font-size:20px;
	height:30px;
	line-height:30px;
	text-align:center;
	margin-top:16.25px;
}
#box header li img{
	width:30px;
	height:30px;
	border-radius:3px;
}
#box header input{
	height:25px;
	border-radius:10px;
}
#box>header>ul>li:nth-child(1){
	margin-left:16.25px;
}
#box>header>ul>li:nth-child(2){
	color:white;
	margin-left:5px;
}
#box>header>ul>li:nth-child(3){
	margin-left:100px;
    position: relative;
}
#box>header>ul>li:nth-child(3) ul{
	position: absolute;
	z-index: 90;
	background-color: white;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	overflow:hidden;
	display:none;
    width:100%;
	
}
#box>header>ul>li:nth-child(3) ul li{
	clear: left;
	width: 100%;
	text-align: left;
}
#box>header>ul>li:nth-child(3) ul li:hover{
	width: 100%;
	background-color:cadetblue;
}
#box>header>ul>li:nth-child(4){
	margin-left:400px;
}
#box>header>ul>li:nth-child(5){
	position:relative;
}
#logIn{
	width:100px;
}
#box>header>ul>li:nth-child(5) ul{
	position:absolute;
	width:100px;
	z-index: 1;
	text-align: center;
	display: none;
	
}
#box>header>ul>li:nth-child(5) ul li{
	text-align: center;
	width:100%;
	
}
#box>header>ul>li:nth-child(5) ul li:hover{
	background-color: #DA70D6;
	
}
#box footer ul li{
	list-style: none;
	float:left;
	text-align: center;
	line-height:30px;
	margin-left:30px;
	margin-top:16px;
	height:30px;
}
#box footer ul li:nth-child(4){
	width:50px;
}
#box footer ul li img{
	width:30px;
	height:30px;
	border-radius:3px;
}

#box footer ul input:nth-child(2){
	width:100px;
}
#box_body_1{
	margin-top: 50px;
	width:45%;
	height:450px;
	float:right;
	margin-left:12%;
/* 	background-color:palegreen; */
	font-size:20px;
	margin-right:3%;
}
#box_body_2{
	width:30%;
	height:450px;
	/* background-color: aqua; */
	float:right;
	margin-top: 50px;
	position:relative;
	font-size:20px;
	text-align: center;
}
#box_body_2>img{
	width:200px;
	height:200px;
	margin:0 auto;
	border:60px solid black;
	border-radius:50%;
}
#box_body_2 ul{
	margin-top: 100px;
}
#box_body_2 ul li{
	list-style: none;
	float:left;
	border:1px solid gainsboro;
	
}
#box_body_2 ul li:nth-child(2){
	margin-left:24px;
	margin-right:24px;
}
#box_body_2 ul li:nth-child(3){
	margin-right:24px;
}
#box_body_2 ul li img{
	width:20px;
	height:20px;
}
.body_ul_1 li{
	float:left;
	width:33.333%;
	list-style:none;
	margin-top: 10px;
}
.body_ul_1 li span{
	color:blue;
}
.body_ul_2{
	margin-top:20px;
	width:540px;
	height:370px;
	overflow-y:scroll;
	font-size:20px;
}
.body_ul_2 li{
	height:50px;
	line-height: 50px;
	list-style: none;
    transition: all 1s linear;
}
.body_ul_2 li:hover{
	background-color: #ADFF2F;
	cursor:pointer;
}
#box_body_3{
	top:100px;
	position:relative;
	width:80%;
	margin:0 auto;
	/* border-top:1px solid gold; */
}
.b3_ul li{
	margin-top: 20px;
	list-style:none;
}
.b3_ul li:nth-child(1){
	font-size:25px;
}
.b3_ul li #span_1{
	font-size:14px;
}
.b3_ul li #span_2{
	color:lightgray;
} 
.b3_ul li input{
	width:100%;
	height:30px;
}
.b3_ul li:nth-child(3){
	font-size:16px;
	border-bottom: 1px dashed black;
}
.b3_ul_li{
	
}

#comment{
	width:100%;
	display:block;
	position:absolute;
}
#comment .addLi{
	list-style: none;
	position:relative;
}
.addLi{
	width:100%;
	height:60px;
}
.addLi img{
	width:50px;
	height:50px;
	border-radius:50%;
	float:left;
}
.addLi ul{
	font-size:14px;
	display: inline;
	list-style-type: none;
	float:left;
	margin-left:30px;
	width:90%;
}
.addLi li:nth-child(1) span{
	color:blue;
}
.addLi ul li{
	list-style:none;
	margin-top:5px;
}
.addLi ul li:nth-child(2){
	float:left;
	color:seagreen;
}
.addLi ul li:nth-of-type(n+3){
	float:right;
	color:seagreen;
}
#list{
	width:500px;
	height:500px;
	position:absolute;
	right: 0;
	top:190px;
    font-size:20px;	
	background-color:white;
	overflow:hidden;
	display: none;
}
#list p{
	font-size: 16px;;
}
#list>div{
	width:100%;
	height:60px;
	background-color: #D3D3D3;
	/* line-height: 60px;; */
	position:relative;
	top:0;
}
.list_1_1{
	float:left;
	width:200px;
	height:30px;
    margin-left:150px;
	margin-top: 15px;
	border-radius:15px;
	background-color: antiquewhite;
	overflow:hidden;
		
  }
 .list_1_1 div:nth-child(1){
	 background-color: antiquewhite;
 }
 .list_1_1 div:nth-child(2){
 	 background-color:white;
 }
.list_1_2{
	display: none;
	
}
.list_1_2 li:hover{
	background-color:indianred;
}
#list ul li{
	height:50px;
	line-height: 50px;
	list-style: none;
}
#list ul li:hover{
	background-color:pink;
	cursor:pointer;
}
#list>div>div>div{
	width:100px;
	height:30px;
	text-align: center;
	line-height: 30px;
	float:left;
}
#masklayer{
	position:absolute;
	width:100%;
	height:100%;
	background-color: #000000;
	opacity: 0.2;
	top:0;
	display:none;
}
.adddiv{
	width:400px;
	height:300px;
    background-color:greenyellow;
    position:absolute;
	top:50%;
	left:50%;
	margin-top:-150px;
	margin-left:-200px;
	display:none;
}
.adddiv img{
	width:20px;
	height:20px;
	float:right;
}
.adddiv .add{
	width:70%;
	margin:0 auto;
}
.adddiv .add li{
	list-style:none;
	height:50px;
	text-align: center;
	font-size:25px;
	width:280px;
	line-height: 50px;
}
.adddiv ul li:last-child{
	background-color: violet;
}
.adddiv ul li:nth-child(2) input{
	height:30px;
	width:100%;
}
.adddiv ul li:nth-child(3) input{
	height:30px;
	width:100%;
}
.adddiv ul li:nth-child(4) span{
	font-size:14px;
	float:right;
	top:18px;
}
#hint_1{
     position:absolute;
	 width:70%;
	 left:15%;
	 top:95px;
	 background-color:white;
	 display: none;
	 height:200px;
}

#hint_1 li{
	height:50px;
	line-height:50px;
	list-style: none;
	font-size: 20px;;
	background-color: white;
}
#hint_1 li:hover{
	color:red;
}
#hint{
	font-size:14px;
	float:left;
	top:18px;
	color:red;
}
.rotate{
	animation:xuanzhuan 10s linear infinite;
	
}
@keyframes xuanzhuan{
     0%{
		 transform: rotate(0deg);
	 }
	 50%{
		 transform: rotate(180deg);
	 }
	 100%{
		 transform:rotate(360deg);
	 }
}
.list_style{
	animation: ;
	background-color:#99ccff;
}
#desktop{
	width: 1200px;
	height:100px;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.4) 98%, #FFFFFF 100%); 
	position:absolute;
	top:80%;
	left:50%;
	margin-left:-600px;
	text-align:center;
	line-height:100px;
	font-size:60px;
	color:ghostwhite;
	display:none;
}
#desktop img{
	position:absolute;
	right:0;
	top:0;
	width:30px;
	height:30px;
	transition: all 1s linear;
}
/* #desktop{
    color: #5BA6DF;
    text-shadow: 1px 1px 10px #5BA6DF;
    background-image: -webkit-linear-gradient(left, #2EC7C9, #E6D205 25%, #2EC7C9 50%,         #E6D205 75%, #2EC7C9 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s infinite linear;
    font-family:Chaparral Pro Light;
	letter-spacing:2px;
	font-size:56px;
  }
 
 @keyframes masked-animation {
            0% {
                background-position: 0 0;   
            }
            100% {
                background-position: -100% 0;
            }
        }
 */
#remark{
	width:500px;
	height:350px;
	background-color:#FFC0CB;
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-200px;
	margin-left:-250px;
	display: none
	}
#remark textarea{
	width:400px;
	height:200px;
	position:absolute;
	left:50px;
	font-size:20px;
}
#remark p{
	height:60px;
	font-size:30px;
	margin-left:30px;
	line-height:60px;
}
#remark b{
	width:60px;
	height:40px;
	position:absolute;
	right:50px;
	bottom:30px;
	font-size:30px;
	line-height:40px;
}
#remark img{
	width:30px;
	height:30px;
	position:absolute;
	right:0;
	top:0;
	c
}
#remark b:hover{
	cursor: pointer;
	color:darkred;
	background-color:deepskyblue;
}
#list p span:hover{
	background-color: #00BFFF;
}
